<!doctype html>
<html lang="en">
  <head>
    <%= htmlWebpackPlugin.options.tags.head %>

    <!-- 页面css -->
    <link rel="stylesheet" href="./css/stats.css" />
  </head>

  <body>
    <div class="page">
      <header class="page-header page-header-primary">
        <div class="page-header-nav transparent">
          <div class="header-nav-left mine-open">
            <img class="user-photo" src="./images/user_photo.png" alt="" srcset="" />
          </div>
          <div class="header-nav-title">
            <h2 class="flex-1 font-size-big font-weight-bold text-align-center">inballbeat</h2>
          </div>
        </div>
        <div class="list-match-tab"><%= htmlWebpackPlugin.options.tags.tabNav %></div>

        <div class="flex-column">
          <div class="bg-primary padding-5"></div>
          <div class="align-center margin-bottom-5">
            <div class="flex-1">
              <div class="tab-nav list-type-tab">
                <div class="active tab-nav-item" data-role="fixtures"><span class="tab-nav-name">Fixtures</span></div>
                <div class="tab-nav-item" data-role="ranking"><span class="tab-nav-name">Ranking</span></div>
                <div class="tab-nav-item" data-role="data"><span class="tab-nav-name">Data</span></div>
              </div>
            </div>
            <div class="btn-group action-sheet">
              <div class="dropdown-toggle tag-primary align-center margin-right-10 margin-top-5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <span class="text-theme-primary font-size-small margin-right-5">24/25</span>
                <span class="glyphicon glyphicon-menu-down font-size-small"></span>
              </div>
              <ul class="dropdown-menu">
                <li class="active"><a>24/25</a></li>
                <li><a>24/26</a></li>
                <li><a>24/27</a></li>
                <li><a>24/28</a></li>
                <li><a>24/29</a></li>
              </ul>
            </div>
          </div>
        </div>
      </header>
      <!-- 内容主体 -->
      <main class="page-main">
        <!-- Fixtures -->
        <div id="fixtures" class="full-height">
          <div class="bg-regular flex-column full-height">
            <div class="list-header">
              <div class="align-center margin-top-5 padding-10 font-size-normal line-height-1 text-color-secondary">
                <div class="align-center">
                  <img class="round-btn-icon" src="./images/pre_icon.png" alt="" srcset="" />
                  <span class="margin-left-10">Previous</span>
                </div>
                <div class="flex-1 text-align-center text-theme-primary">
                  <div class="btn-group action-sheet">
                    <div class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="text-theme-primary margin-right-5">League Round 26</span>
                      <span class="glyphicon glyphicon-menu-down"></span>
                    </div>
                    <ul class="dropdown-menu">
                      <li class="active"><a>League Round 26</a></li>
                      <li><a>Another action</a></li>
                      <li><a>Something else here</a></li>
                      <li><a>Separated link</a></li>
                    </ul>
                  </div>
                </div>
                <div class="align-center">
                  <span class="margin-right-10">Next</span>
                  <img class="round-btn-icon" src="./images/next_icon.png" alt="" srcset="" />
                </div>
              </div>

              <div class="bg-primary padding-5">
                <div class="flex text-color-regular text-align-center">
                  <div class="flex-2">Time</div>
                  <div class="flex-3 text-align-right">Home</div>
                  <div class="flex-1 margin-left-5 margin-right-5">Score</div>
                  <div class="flex-3 text-align-left">Away</div>
                  <div class="flex-1">H</div>
                  <div class="flex-1">O/U</div>
                  <div class="flex-1">C</div>
                </div>
              </div>
            </div>
            <div class="flex-1 height-0 overflow-y-auto">
              <div class="margin-bottom-10 flex-column list"><%= htmlWebpackPlugin.options.tags.statsItem %></div>
            </div>
          </div>
        </div>
        <!-- Ranking -->
        <div id="ranking" class="full-height hide-none">
          <div class="flex-column full-height">
            <div class="list-header">
              <div class="bg-primary padding-5">
                <div class="flex text-color-regular text-align-center">
                  <div class="flex-1">Rank</div>
                  <div class="flex-2 text-align-left">
                    <span class="margin-left-15">Team</span>
                  </div>
                  <div class="flex-1">P</div>
                  <div class="flex-1">W/D/L</div>
                  <div class="flex-1">F/A</div>
                  <div class="flex-1">GD</div>
                  <div class="flex-1">Pts</div>
                </div>
              </div>
            </div>
            <div class="flex-1 height-0 overflow-y-auto">
              <div class="margin-bottom-10 flex-column list"><%= htmlWebpackPlugin.options.tags.rankItem %></div>
            </div>
          </div>
        </div>
        <!-- Data -->
        <div id="data" class="full-height hide-none">
          <div class="flex-column full-height">
            <div class="list-header">
              <div class="full-width flex bg-regular padding-10 margin-bottom-5">
                <div class="flex flex-gap-5">
                  <div class="tag-primary">1x2</div>
                  <div class="tag-gray">Handicap</div>
                  <div class="tag-gray">Over/Under</div>
                  <div class="tag-gray">Odd/Even</div>
                </div>
              </div>
              <div class="bg-primary padding-5">
                <div class="flex text-color-regular text-align-center">
                  <div class="flex-1">Rank</div>
                  <div class="flex-3 text-align-left">
                    <span class="margin-left-15">Team</span>
                  </div>
                  <div class="flex-1">P</div>
                  <div class="flex-1">Home</div>
                  <div class="flex-1">Draw</div>
                  <div class="flex-1">Away</div>
                  <div class="flex-1">WR</div>
                </div>
              </div>
            </div>
            <div class="flex-1 height-0 overflow-y-auto">
              <div class="margin-bottom-10 flex-column list"><%= htmlWebpackPlugin.options.tags.rankItemData %></div>
            </div>
          </div>
        </div>
      </main>

      <!-- 页面底部tabBar -->
      <footer class="page-footer"><%= htmlWebpackPlugin.options.tags.tabBar %></footer>

      <%= htmlWebpackPlugin.options.tags.mine %>
    </div>

    <%= htmlWebpackPlugin.options.tags.foot %>
  </body>
</html>
